<template>
  <div class="consult">
    <el-row>
      <el-col :span="4">
        <el-card class="box-card" :style="{ height: heightCard }">
          <div slot="header" class="clearfix">
            <span
              style="display: inline-block; font-size: 20px; font-weight: bold"
              >标签分组</span
            >
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              @click="addTagGroup"
              >新增</el-button
            >
          </div>
          <div class="tagGroup">
            <ul
              v-for="(group, index) in tagGroups"
              :key="index"
              @click="handleGroupClick(index)"
            >
              <li :class="{ active: index === selectedGroupIndex }">
                {{ group.name }}
                <el-button style="float: right; padding: 3px 0" type="text"
                  >删除</el-button
                >
                <el-button style="float: right; padding: 3px 0" type="text"
                  >修改</el-button
                >
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card class="box-card" :style="{ height: heightCard }">
          <div slot="header" class="clearfix">
            <span
              style="display: inline-block; font-size: 20px; font-weight: bold"
              >标签分类</span
            >
            <el-button style="float: right; padding: 3px 0" type="text"
              >新增</el-button
            >
          </div>
          <div class="tagGroup">
            <ul
              v-for="(category, categoryIndex) in currentGroup.categories"
              :key="categoryIndex"
              @click="handleCategoryClick(categoryIndex)"
            >
              <li :class="{ active: categoryIndex === selectedCategoryIndex }">
                {{ category.name }}
                <el-button style="float: right; padding: 3px 0" type="text"
                  >删除</el-button
                >
                <el-button style="float: right; padding: 3px 0" type="text"
                  >修改</el-button
                >
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card class="box-card" :style="{ height: heightCard }">
          <div slot="header" class="clearfix">
            <span
              style="display: inline-block; font-size: 20px; font-weight: bold"
              >标签定义</span
            >
            <el-button style="float: right; padding: 3px 0" type="text"
              >新增</el-button
            >
          </div>
          <div class="tagGroup">
            <ul
              v-for="(tags, tagsIndex) in currentCategory.tags"
              :key="tagsIndex"
              @click="handleTagClick(tagsIndex)"
            >
              <li :class="{ active: tagsIndex === selectTagsIndex }">
                {{ tags.name }}
                <el-button style="float: right; padding: 3px 0" type="text"
                  >删除</el-button
                >
                <el-button style="float: right; padding: 3px 0" type="text"
                  >修改</el-button
                >
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card" :style="{ height: heightCard }">
          <div style="display: flex; justify-content: end; padding: 10px">
            <el-button type="primary" size="medium" plain @click="handleAddData"
              >新增</el-button
            >
            <el-button type="primary" size="medium" plain>修改</el-button>
            <el-button type="danger" size="medium" plain>删除</el-button>
          </div>
          <div
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-left: 20px;
              margin-right: 20px;
            "
          >
            <h4>人员表:</h4>
          </div>
          <div style="padding: 0 20px 0 20px">
            <vxe-table
              border
              ref="xTable"
              :resizable="true"
              :align="allAlign"
              :data="tableData"
              :height="heightTable"
              :scroll-y="{ enabled: false }"
              highlight-current-row
              @current-change="handleCurrentRow"
              row-id="id"
            >
              <!-- show-overflow -->
              <vxe-column width="60" align="center">
                <template #default>
                  <span class="drag-btn">
                    <i class="vxe-icon--menu"></i>
                  </span>
                </template>
              </vxe-column>
              <vxe-column title="序号" type="seq" width="60"></vxe-column>
              <vxe-column title="表名" field="name"></vxe-column>
              <vxe-column field="sex" title="字段"></vxe-column>
              <vxe-column field="age" title="比较符"></vxe-column>
              <vxe-column field="role" title="比较值"></vxe-column>
            </vxe-table>
          </div>
          <div
            style="
              display: flex;
              justify-content: center;
              align-items: center;
              margin-top: 60px;
            "
          >
            查询条件运算方式：<el-input
              size="medium"
              v-model="searchOperate"
              style="width: 500px"
              @input="validateInput"
            />
          </div>
          <p style="color: red; display: flex; justify-content: center">
            编写条件定义的运算逻辑。如:同时满足条件1和2，然后在满足条件3，输入框填写<br />(1+2)+3
          </p>
          <div style="display: flex; justify-content: end; margin-right: 10px">
            <el-button type="primary">保存</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <tagAddDialog ref="tagAddDialogRefs" v-if="tagAddDialogFlag" />
    <tagButtonClickEvent
      ref="tagButtonClickEventRefs"
      @addData="handleAddData"
      v-if="tagButtonClickEventFlag"
      :list = "tableData"
    />
  </div>
</template>
  
  <script>
import tagAddDialog from "./tagAddDialog.vue";
import tagButtonClickEvent from "./tagButtonClickEvent.vue";
import Sortable from "sortablejs";
export default {
  components: { tagAddDialog, tagButtonClickEvent },
  data() {
    return {
      heightCard: window.innerHeight - 125 + "px",
      heightTable: window.innerHeight - 480 + "px",
      tagGroups: [
        {
          name: "简历标签",
          categories: [
            {
              name: "简历机构级别",
              tags: [{ name: "党委" }, { name: "政府" }],
            },
            {
              name: "简历工作单位属性",
              tags: [{ name: "企业" }, { name: "政府机关" }],
            },
          ],
        },
        {
          name: "家庭成员标签",
          categories: [
            { name: "家庭关系", tags: [{ name: "父子" }, { name: "兄弟" }] },
            { name: "家庭角色", tags: [{ name: "父亲" }, { name: "母亲" }] },
          ],
        },
        {
          name: "其他标签",
          categories: [
            { name: "其他分类", tags: [{ name: "标签1" }, { name: "标签2" }] },
          ],
        },
      ],
      allAlign: "center",
      tableData: [
        {
          id: 10001,
          name: "简历表",
          role: "date",
          sex: "简历内容",
          age: 28,
          address: "test abc",
        },
        {
          id: 10002,
          name: "Test2",
          role: "select",
          sex: "简历内容",
          age: 22,
          address: "Guangzhou",
        },
        {
          id: 10003,
          name: "Test3",
          role: "textarea",
          sex: "简历内容",
          age: 32,
          address: "Shanghai",
        },
        {
          id: 10001,
          name: "简历表",
          role: "number",
          sex: "简历内容",
          age: 28,
          address: "test abc",
        },
      ],
      nameOption: [
        {
          value: "选项1",
          label: "简历表",
        },
        {
          value: "选项2",
          label: "文件表",
        },
        {
          value: "选项3",
          label: "人员表",
        },
      ],
      fieldOptions: [
        {
          value: "选项1",
          label: "简历内容",
        },
        {
          value: "选项2",
          label: "简历表述",
        },
        {
          value: "选项3",
          label: "是否在任",
        },
      ],
      comparisonOptions: [
        {
          value: "选项1",
          label: "包含",
        },
        {
          value: "选项2",
          label: "不包含",
        },
        {
          value: "选项3",
          label: "等于",
        },
      ],
      selectedGroupIndex: 0,
      selectedCategoryIndex: 0,
      selectTagsIndex: 0,
      tagAddDialogFlag: false,
      tagButtonClickEventFlag: false,
      currentRow: null,
      searchOperate: "",
      value1: "",
      num: "",
      textarea: "",
    };
  },
  computed: {
    currentGroup() {
      return this.tagGroups[this.selectedGroupIndex];
    },
    currentCategory() {
      return this.currentGroup.categories[this.selectedCategoryIndex]; // 默认显示第一个分类
    },
  },
  created() {
    this.rowDrop();
  },
  beforeDestroy() {
    if (this.sortable) {
      this.sortable.destroy();
    }
  },
  methods: {
    // toolbarButtonClickEvent() {
    //   let obj = {
    //     name: "选项1",
    //     sex: "选项1",
    //     age: "选项1",
    //     role: "选项1",
    //   };
    //   this.tableData.push(obj);
    //   this.$nextTick(() => {
    //     const $grid = this.$refs.xTable;
    //     $grid.setCurrentRow(obj);
    //   });
    // },
    // 新增
    handleAddData(newData) {
        this.tagButtonClickEventFlag = true;
        this.$nextTick(() => {
          this.$refs.tagButtonClickEventRefs.init();
        });
        this.tableData.push(newData)
    },
    handleGroupClick(index) {
      this.selectedGroupIndex = index;
      this.selectedCategoryIndex = 0; // 将标签分类下标设置为0
      this.selectTagsIndex = 0; // 将标签定义下标设置为0
    },
    handleCategoryClick(categoryIndex) {
      this.selectedCategoryIndex = categoryIndex;
    },
    handleTagClick(tagsIndex) {
      this.selectTagsIndex = tagsIndex;
    },
    addTagGroup() {
      this.tagAddDialogFlag = true;
      this.$nextTick(() => {
        this.$refs.tagAddDialogRefs.init();
      });
    },
    handleCurrentRow(currentRow) {
      this.currentRow = currentRow.row;
    },
    rowDrop() {
      this.$nextTick(() => {
        let xTable = this.$refs.xTable;
        this.sortable = Sortable.create(
          xTable.$el.querySelector(".body--wrapper>.vxe-table--body tbody"),
          {
            handle: ".vxe-body--row",
            animation: 150,
            onEnd: ({ newIndex, oldIndex }) => {
              // 拖拽后回调
              /*
	            常规想法
				此方法数组处理正常，但表格渲染顺序有问题
	            */
              // let currRow = this.tableData.splice(oldIndex, 1)[0];
              // this.tableData.splice(newIndex, 0, currRow);

              // 解决方案
              this.tableData.splice(
                newIndex,
                0,
                this.tableData.splice(oldIndex, 1)[0]
              );
              var newArray = this.tableData.slice(0);
              this.tableData = [];
              this.$nextTick(function () {
                this.tableData = newArray;
              });
            },
          }
        );
      });
    },
    validateInput() {
      // 只允许输入数字、加号、减号和英文括号
      this.searchOperate = this.searchOperate.replace(/[^0-9\+\-\(\)]/g, "");
      if (this.searchOperate === "") {
      }
      console.log(this.searchOperate, "searchOperate");

      // 限制输入长度不能超过表格数据长度
      if (this.searchOperate.length > this.tableData.length) {
        this.searchOperate = this.searchOperate.slice(0, this.tableData.length);
      }
    },
  },
};
</script>
<style scoped>
.consult {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
}

.tagGroup ul {
  list-style: none;
}

.tagGroup ul li {
  padding: 20px;
  border-bottom: 1px solid #eee;
}
.active {
  /* background: #ecf5ff;
  color: #409eff; */
  background: #cfe5fc;
  color: #000;
}
>>> .el-card__header {
  background: linear-gradient(180deg, #fff, #ededed);
}

>>> .el-card__body {
  padding: 0;
}
</style>



